<template>
	<view class="container">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color"
		style="
		justify-content:space-between;
		padding-top: 20rpx;
		margin-bottom: 10rpx;
		">
			<u-subsection 
			:list="list" 
			@change="sectionChange" 
			:bold="bold"
			:active-color="activeColor"
			:current="current" 
			:mode="mode"
			style="width: 80%;padding-left: 10%;"
			height="65"
			font-size="25"
			></u-subsection>
		</view>
		<view class="type-list">
			<view class="expenditure-list" v-show="current == 0">
				<view v-for="(item, index) in expenditure_list" :key="index" style="text-align: center;" @click="selectItem(item.id)">
					<view class="list-box" :class="[select_item==item.id ? 'select-item':'']">
						<image slot="icon" class="box-icon" :src="item.icon" mode="" :lazy-load="lazy_load"></image>
					</view>
					<view class="box-text">{{item.text}}</view>
				</view>
			</view>
			<view class="income-list" v-show="current == 1">
				<view v-for="(item, index) in income_list" :key="index" style="text-align: center;" @click="selectItem(item.id)">
					<view class="list-box" :class="[select_item==item.id ? 'select-item':'']">
						<image slot="icon" class="box-icon" :src="item.icon" mode="" :lazy-load="lazy_load"></image>
					</view>
					<view class="box-text">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		<!-- 弹出框 -->
		<u-popup 
		border-radius="10" 
		v-model="popup_show"	
		@close="popupClose" 
		@open="popupOpen" 
		:mode="popup_mode" 
		length="60%" 
		:mask="popup_mask"
		:closeable="popup_closeable"
		:close-icon-pos="popup_closeIconPos"
		style="margin: 30rpx;"
		>
			<view class="popup_box">
				<view class="popup_line">
					<input type="digit" :value="value" placeholder="0.00" 
					style="font-size: 50rpx;
					min-height: 100rpx; 
					height: 100rpx;
					width: 50%;"
					@input="onInput"
					@confirm="onConfirm"
					 />
					<image slot="icon" @click="clickImg()" class="photo_icon" :src="img" mode=""></image>
					
					<view v-show="img != empty_img">
						<view class="del-btn" @click="delImg()">
							<uni-icons :color="iconclear.color" :size="iconclear.size" :type="iconclear.type" />
						</view>
					</view>
				</view>
				
				<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
				
				<view class="popup_line">
					<image slot="icon" class="popup_icon" :src="iconList.add_bill_time" mode="" :lazy-load="lazy_load"></image>
					<text class="popup_type">日期</text>
					<view style="font-size: 28rpx;font-weight: 600;" @click="clickDate()">
						{{picker_time}}
						<u-icon name="arrow-right" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
					</view>
				</view>
				<view class="popup_line">
					<image slot="icon" class="popup_icon" :src="iconList.add_bill_type" mode="" :lazy-load="lazy_load"></image>
					<text class="popup_type">分类</text>
					<view style="font-size: 25rpx;font-weight: 600;">
						{{show_item_text}}
					</view>
				</view>
				
				<view class="popup_line">
					<image slot="icon" class="popup_icon" :src="iconList.add_bill_desc" mode="" :lazy-load="lazy_load"></image>
					<text class="popup_type">备注</text>
					<input type="text" :value="desc" @input="onDescInput" placeholder="添加备注" style="font-size: 28rpx;width: 70%;" />
				</view>
				
				<view style="display: flex; padding: 20rpx;">
					<view style="margin: auto;">
						<u-button 
						type="success" 
						size="medium" 
						:disabled="submitStatus" 
						@click="submit"
						
						>保存</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['支出','收入'],
				current: 0,
				bold : false,
				activeColor:"#2d2d2d",
				mode: "subsection",
				
				select_item: -1, // 默认没有选中
				
				popup_show: false,
				popup_mode: 'bottom',
				popup_mask: true, // 是否显示遮罩
				popup_closeable: false,
				popup_closeIconPos: 'top-right',
				
				direction: 'row',
				hairLine: true,
				length: '100%',
				color: "#d8d8d8",
				borderStyle: 'solid',
				
				photo_show: true,
				
				submitStatus: true,
				
				picker_params: {
					year: false,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				picker_show: false,
				picker_time: "",
				month: "",
				day: "",
				
				value: "",
				desc: "",
				show_item_text: "",
				
				expenditure_list:[
					{"id":"1","text":"衣服","icon":"../../static/type/1.png"},
					{"id":"2","text":"蔬菜","icon":"../../static/type/2.png"},
					{"id":"3","text":"礼金","icon":"../../static/type/3.png"},
					{"id":"4","text":"捐款","icon":"../../static/type/4.png"},
					{"id":"5","text":"水果","icon":"../../static/type/5.png"},
					{"id":"6","text":"医疗","icon":"../../static/type/6.png"},
					{"id":"-999","text":"设置","icon":"../../static/setting.png"}
				],
				income_list:[
					{"id":"1","text":"衣服","icon":"../../static/type/1.png"},
					{"id":"2","text":"蔬菜","icon":"../../static/type/2.png"},
					{"id":"3","text":"礼金","icon":"../../static/type/3.png"},
					{"id":"4","text":"捐款","icon":"../../static/type/4.png"},
					{"id":"5","text":"水果","icon":"../../static/type/5.png"},
					{"id":"6","text":"医疗","icon":"../../static/type/6.png"},
					{"id":"-999","text":"设置","icon":"../../static/setting.png"}
				],
				
				empty_img: '../../static/empty-img.png',
				img: '',
				
				iconclear:{
					color : "red",
					size: '20',
					type: 'clear'
				},
				lazy_load: true,
				iconList: {
					add_bill_time:'../../static/add_bill_time.png',
					add_bill_type:'../../static/add_bill_type.png',
					add_bill_desc:'../../static/add_bill_desc.png',
					user_bill:'../../static/user_bill.png',
					user_feedback:'../../static/user_feedback.png',
					user_kefu:'../../static/user_kefu.png',
					user_time:'../../static/user_time.png',
					user_type:'../../static/user_type.png'
				}
			}
		},
		methods: {
			sectionChange(index){
				this.current = index;
				this.select_item = -1;
			},
			selectItem(index){
				
				if(this.current == 0 && (index == (this.expenditure_list[this.expenditure_list.length-1].id))){
					this.select_item = -1;
					return;
				}
				if(this.current == 1 && (index == (this.income_list[this.income_list.length-1].id))){
					this.select_item = -1;
					return;
				}
				
				this.select_item = index;
				
				this.popup_show = true;
				
				this.initValue();
				
				this.show_item_text = (this.current == 0) ? this.expenditure_list[index].text : this.income_list[index].text;
			},
			popupClose(){
				
			},
			popupOpen(){
				
			},
			clickDate(){
				this.picker_show = true;
			},
			pickerConfirm(e) {
				if (this.picker_params.month) this.month = e.month;
				if (this.picker_params.day) this.day = e.day;
				
				this.picker_time = this.month + "-" + this.day;
			},
			onInput(e){
				let v = e.detail.value;
				v = v.replace(/^\D*([1-9]\d{0,6}\.?\d{0,2})?.*$/,'$1');
				this.value = v;
				if(v>0){
					this.submitStatus = false;
				}else{
					this.submitStatus = true;
				}
				return v;
			},
			onDescInput(e){
				this.desc = e.detail.value;
			},
			// 把按钮状态改为禁止，开启加载动画
			submit(){
				setTimeout(() => {
					uni.switchTab({
					    url: '/pages/index/index'
					});
				}, 500)
			},
			initValue(){
				this.value = "";
				this.desc = "";
				this.submitStatus = true;
				this.img = this.empty_img;
				
				let t = new Date().toISOString().slice(0, 10);
				let t_a = t.split("-");
				this.month = t_a[1] || "";
				this.day = t_a[2] || "";
				this.picker_time = this.month + "-" + this.day;
			},
			clickImg(){
				if(this.img == this.empty_img){
					this.uploadImg();
				}else{
					this.previewImg();
				}
			},
			delImg(){
				this.img = this.empty_img;
			},
			previewImg(){
				uni.previewImage({
					current : 0,
				    urls: [this.img],
				    longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
				        fail: function(err) {
				            
				        }
				    }
				});
			},
			uploadImg(){
				let _this = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						console.log('选择相册后的文件列表：',JSON.stringify(res.tempFilePaths));
				    }
				});
			}
		},
		onLoad(options){
			this.initValue();
		}
	}
</script>

<style lang="scss">	
	.container{
		background-color: #ffffff;
	}
	.bg-color{
		background-color: #FDDC2D;
	}
	.expenditure-list, .income-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.list-box{
		background-color: #f7f7f7;
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 100%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; 
		
		width: 110rpx;
		height: 110rpx;
		display:flex; 
		justify-content:center;
		align-items:center;
	}
	.select-item{
		background-color: #FDDC2D;
	}
	.box-icon{
		width: 55rpx;
		height: 55rpx;
	}
	.box-text{
		font-size: 25rpx;
		color: #606266;
	}
	
	.popup_box{
		padding: 30rpx;
		
		.del-btn{
			position: absolute;
			top: 5rpx;
			left: 645rpx;
			z-index: 10;
			
			border-radius: 100rpx;
			width: 44rpx;
			height: 44rpx;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
		
		}
	}
	.popup_line{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 26rpx 32rpx;
		font-size: 28rpx;
		line-height: 54rpx;
		color: #606266;
		background-color: #fff;
		text-align: left;
	}
	.popup_icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.popup_type{
		font-size: 28rpx;
		padding-right: 30rpx;
	}
	.u-cell__right-icon-wrap {
		display: inline-flex;
		align-items: center;
		padding-left: 10rpx;
	}
	.photo_icon{
		width: 100rpx;
		height: 100rpx;
		margin-left: auto;
	}
	
</style>
